<template>
  <!-- 首次妊检提示 -->
  <div style="margin-bottom: 20px;">
    <el-button type="danger" :icon="Plus" :disabled="true">去妊检</el-button>
  </div>

   <!-- 表格显示 -->
  <el-table :data="tableData" style="width: 100%;" class="show" border >
    <el-table-column prop="prenatalCheckupId" label="序号" width="60" align="center" />
    <el-table-column prop="earNumber" label="种母耳号" align="center" />
    <el-table-column label="妊娠天数" align="center">
      <template #default="scope">
        <el-text v-if="scope.row.pregnancyTestResultId=='4'">{{ Math.ceil((new Date()-new Date(scope.row.pregnancyTestDate))/ (1000 * 3600 * 24)) }}</el-text>
        <el-text v-else>0</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="bedroomName" label="栋舍" align="center" />
    <el-table-column prop="fieldName" label="栏位" align="center" />
    <el-table-column label="类型" align="center">
      <template #default>
        <span>提示</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
   <table style="margin-top: 10px;">
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout="total, slot, prev, pager, next"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        ,每页显示{{ form.pageSize }}条,当前第{{ form.pageIndex }}/{{ form.pageCount }}页
        <el-button class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout=" slot, sizes, jumper"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        <el-button class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
   </table>
</template>

<script setup lang="ts">
import { ref , onMounted, reactive} from 'vue'
import axios from 'axios'
import { Plus } from '@element-plus/icons-vue';

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

//分页条件
const form=reactive({
  pageIndex:1,
  pageSize:3,
  totalCount:0,
  pageCount:0
})

//获取首次妊检数据
const tableData=ref([])
const handleInitialPregnancyTest=()=>{
  axios.post(apiBedinUrl+'/api/DeliveryTips/SearchInitialPregnancyTest',{
    pageIndex:form.pageIndex,
    pageSize:form.pageSize
  }).then(res=>{
    console.log(res.data)
    tableData.value=res.data.data.list;
    form.totalCount=res.data.data.totalCount;
    form.pageCount=res.data.data.pageCount;
  })
}

//分页
const handleSizeChange = (val: number) => {
  form.pageSize=val
  handleInitialPregnancyTest()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  handleInitialPregnancyTest()
}

//创建生命周期函数钩
onMounted(()=>{
handleInitialPregnancyTest();
})
</script>

<style>
.show {
  border-collapse: collapse;
  border-top: 2px solid red; /* 设置上边框为红色 */
};
</style>
